<template>
    <view v-if="props.modelValue" class="dialog">
        <view class="dialog_body">
            <view class="close_box">
                <image :src="getImgOssUrl('/ui-prod-2.0.0/cancel_1.1.png')" class="close_btn" @click="onClose" />
            </view>
            <view class="dialog_content">
                <view class="title">您有一笔订单待支付</view>
                <view class="desc">
                    还剩<view class="tiem_color"><Countdown :endTime="getTimeStamp(props.orderPayTime)" /></view
                    >订单关闭
                </view>
                <view class="confirm" @click="onConfirm">立即支付</view>
            </view>
        </view>
    </view>
</template>

<script setup>
import Countdown from '@/components/countdown';
import { getImgOssUrl, getTimeStamp } from '@/commons/utils';

const props = defineProps({
    modelValue: {
        type: Boolean,
        default: false
    },
    orderPayTime: {
        type: String
    }
});
const emit = defineEmits(['update:modelValue', 'confirm']);
const onClose = () => {
    emit('update:modelValue', false);
};
const onConfirm = () => {
    emit('confirm');
};
</script>

<style lang="scss" scoped>
.dialog {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    .dialog_body {
        width: calc(100% - 190rpx);
        padding: 24rpx 24rpx 48rpx;
        background: #fff;
        border-radius: 8px;
        .close_box {
            display: flex;
            justify-content: flex-end;
            .close_btn {
                width: 32rpx;
                height: 32rpx;
            }
        }
        .dialog_content {
            display: flex;
            flex-direction: column;
            align-items: center;
            .title {
                margin-bottom: 30rpx;
                font-size: 40rpx;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #333333;
            }
            .desc {
                display: flex;
                align-items: center;
                margin-bottom: 60rpx;
                .tiem_color {
                    color: red;
                }
            }
            .confirm {
                width: calc(100% - 40rpx);
                height: 80rpx;
                line-height: 80rpx;
                text-align: center;
                font-size: 32rpx;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #ffffff;
                background: #fe292b;
                border-radius: 40rpx;
            }
        }
    }
}
</style>
